<style>
  .v3-reviews .be_bg .reviews_evaluation {
    background: none;
  }
  .v3-reviews.reviews-evaluation .mySwiper_media .title, 
  .v3-reviews .reviews-evaluation .evaluation_text {
    color: #000;
  }
  .v3-reviews.reviews-evaluation .mySwiper_media .title{
    margin-bottom: 40px;
    min-height: 100px;
  }
  .v3-reviews .text p {
      color: #000;
      margin: 40px auto;
  }
  .v3-reviews .mySwiper_media .mySwiper-logo {
    max-width: 700px;
    top: 0;
    padding: 0;
    margin-bottom: 40px;
    background: transparent;
  }
  .v3-reviews .mySwiper_media .mySwiper-logo .media{
    background: transparent;
  }
  .tenways-index .v3-reviews .swiper-pagination {
    display: block;
  }
  .v3-reviews .twy-media .swiper-pagination-bullet{
    background: #CCC;
  }
  .v3-reviews .mySwiper_media .swiper-pagination-bullet-active{
    background: #000;
  }
  .v3-reviews .reviews_evaluation .swiper-wrapper{
    padding: 0;
  }
  .tenways-index .v3-reviews.reviews-evaluation {
    margin: 80px auto;
  }
  #shopify-section-template--16350247452821__c79dceb1-1f6e-4fb8-a056-1ba7a49bcf70 .all-product{
    padding-bottom: 40px;
  }

  
  @media screen and (max-width: 990px){
    .tenways-index .v3-reviews.reviews-evaluation {
    margin: 40px auto;
  }
   .v3-reviews .be_bg {
      background: #fff;
    }
   .v3-reviews .twy-media .multicolumn-card .media>img {
       height: 25px;
    }
    .v3-reviews.reviews-evaluation .mySwiper_media .title {
      margin-bottom: 20px;
      min-height: auto;
      font-size: 18px;
      line-height: 26px;
    }
    .v3-reviews .text p {
    margin: 20px auto 80px;
    }
  }


</style>


<div class="twy-media">
     <div class="mySwiper_media swiper-father">
         <div class="page-width">
            <div class="be_bg">
              <div thumbsSlider class="swiper mySwiper-logo">
                <div class="swiper-wrapper">              
                    {%- for block in section.blocks -%}
                      {% case block.type %}
                      {%- when 'logo' -%}
                        <div class="swiper-slide">
                          <div class="multicolumn-card">
                          <div class="image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}">
                          {%- if block.settings.image != blank -%}
                            <img
                              srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                                {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                                {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                                {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                                {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                                {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                                {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                                {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                              data-src="{{ block.settings.image | img_url: '1500x' }}"
                              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                              alt="{{ block.settings.image.alt | escape }}"
                              loading="lazy"
                              class="loadlazy"
                              width="{{ block.settings.image.width }}"
                              height="{{ block.settings.image.height }}"
                            >
                          {%- else -%}
                            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                          {%- endif -%}
                        </div>
                        </div>
                        </div>
                      {%- endcase -%}
                    {%- endfor -%}            
                </div>
              </div>
              <div class="swiper reviews_evaluation">
                <div class="swiper-wrapper">
                    {%- for block in section.blocks -%}
                      {% case block.type %}
                      {%- when 'text' -%}
                      <div class="swiper-slide" {{ block.shopify_attributes }}>
                      <div class="evaluation_text" data-swiper-parallax="-300">
                          {%- comment -%} {% if block.settings.html %}
                             <div class="html">
                                {{ block.settings.html }}
                             </div>
                          {% endif %} {%- endcomment -%}
                          {% if block.settings.title %}
                             <div class="title">
                                {{ block.settings.title }}
                             </div>
                          {% endif %}
                          {% if block.settings.text %}
                             <div class="text">
                                {{ block.settings.text }}
                             </div>
                          {% endif %}
                      </div>
                      <div class="multicolumn-card">
                        <div class="image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}">
                        {%- if block.settings.image != blank -%}
                          <img
                            srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                              {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                              {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                              {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                              {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                              {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                              {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                              {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                            data-src="{{ block.settings.image | img_url: '1500x' }}"
                            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                            alt="{{ block.settings.image.alt | escape }}"
                            loading="lazy"
                            class="loadlazy"
                            width="{{ block.settings.image.width }}"
                            height="{{ block.settings.image.height }}"
                          >
                        {%- endif -%}
                        </div>
                      </div>
                     </div>
                   {%- endcase -%}
                  {%- endfor -%}
                </div>
                <div class="swiper-pagination me"></div>
                {%- comment -%} 
                <div class="swiper-button-next me"></div>
                <div class="swiper-button-prev me"></div>
               {%- endcomment -%}
             </div>
            </div>
         </div>
         
     </div>
 </div>

 <script>
  var swiper = new Swiper(".mySwiper-logo", {
    slidesPerView: 1,
    loop: true,
    spaceBetween: 10,
    freeMode: true,
    watchSlidesProgress: true,
    watchSlidesVisibility: true,
    breakpoints: {
      640: {
        slidesPerView: 1,
        loop:true,
        slidesOffsetBefore : 100,
      },
      768: {
        slidesPerView: 4,
        loop:true,
        slidesOffsetBefore : 100,
      },
       990: {
        slidesPerView: 5,
        slidesOffsetBefore : 100,
        loop:true,
      },
      1440: {
        slidesPerView: 5,
        loop:true,
      }
    }
  });
  var swiper2 = new Swiper(".reviews_evaluation", {
    loop: true,
    spaceBetween: 10,
    centeredSlides : true,
    watchSlidesVisibility: true,
    navigation: {
      nextEl: ".swiper-button-next.me",
      prevEl: ".swiper-button-prev.me",
    },
    pagination: {
      clickable: true,
      el: ".swiper-pagination.me",
      renderBullet: function (index, className) {
        return '<span class="' + className + '"><span class="cursor"></span></span>';
      },
    },
    thumbs: {
      swiper: swiper,
      autoScrollOffset: 1,
      watchSlidesVisibility: true,
    },
  });
</script>
 
 

 {% schema %}
 {
   "name": "Reviews evaluation",
   "class": "spaced-section spaced-section--full-width reviews-evaluation v3-reviews",
   "tag": "section",
   "settings": [
      
   ],
   "blocks": [
   {
     "type": "text",
     "name": "text",
     "settings": [
       {
         "type": "html",
         "id": "html",
         "label": "Star media"
       },
       {
         "type": "text",
         "id": "title",
         "default": "Column",
         "label": "Column"
       },
       {
         "type": "richtext",
         "id": "text",
         "label": "Des"
       },
       {
         "type": "image_picker",
         "id": "image",
         "label": "t:sections.multicolumn.blocks.column.settings.image.label"
       }
     ]
    },
    {
      "type": "logo",
      "name": "logo",
      "settings": [
        {
         "type": "image_picker",
         "id": "image",
         "label": "t:sections.multicolumn.blocks.column.settings.image.label"
       }
     ]
    }
   ],
   "presets": [
     {
       "name": "Reviews evaluation"
     }
   ]
 }
 {% endschema %}
 